<template>
  <el-row class="mx__20 px-20 py-20 bg-white main-height">
    <el-col class="current-content-style">
      <el-row>
        <el-col>
          <el-button type="primary" plain @click="visible = true">新增计费类型</el-button>
        </el-col>
      </el-row>
      <el-row class="my-20">
        <el-col>
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-row-class-name="
              ({ row, rowIndex }) => {
                if (rowIndex === 0) return 'table-header-bg'
              }
            "
          >
            <el-table-column label="序号" width="80" type="index"> </el-table-column>
            <el-table-column prop="billingTypeName" label="计费类型" width="300"> </el-table-column>
            <el-table-column label="操作" width="150">
              <template v-slot="scope">
                <el-button
                  type="warning"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="editType(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="deleteType(scope.row.billingTypeId)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="my-20 py-20" style="text-align: text">
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <el-dialog title="添加计费类型" :visible.sync="visible" width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="计费类型名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancleAddTypeHandler">取 消</el-button>
          <el-button type="primary" @click="addTypeHandler('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="编辑计费类型" :visible.sync="visible2" width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="计费类型名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancleAddTypeHandler2">取 消</el-button>
          <el-button type="primary" @click="editTypehandler('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
//计费类型
import { addBillingType, getBillingTypeListPage, updateBillingType, delBillingType } from '@/config/api'
export default {
  data() {
    return {
      visible: false,
      visible2: false,

      ruleForm: {
        id: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入计费类型名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      accTypeForm: {},
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pageSizes: [5, 10, 15, 20]
    }
  },
  created() {
    this.getBillingTypes()
  },
  methods: {
    // 修改计费类型
    editTypehandler(formName) {
      this.$refs[formName].validate(value => {
        if (value) {
          updateBillingType({ billingTypeId: this.ruleForm.id, billingTypeName: this.ruleForm.name }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '更新计费类型成功',
                type: 'success'
              })
              this.visible2 = false
              this.ruleForm.name = ''
              this.getBillingTypes()
            } else {
              this.$message({
                message: '更新计费类型失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 显示编辑modal
    editType(row) {
      this.visible2 = true
      this.ruleForm.id = row.billingTypeId
      this.ruleForm.name = row.billingTypeName
    },
    // 删除计费类型
    deleteType(id) {
      delBillingType({ billingTypeId: id }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message({
            message: '删除计费类型成功',
            type: 'success'
          })
          this.getBillingTypes()
        } else {
          this.$message({
            message: '删除计费类型失败',
            type: 'error'
          })
        }
      })
    },

    // 分页查询计费类型
    getBillingTypes() {
      getBillingTypeListPage({ pageNum: this.currentPage, pageSize: this.pageSize }).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 添加计费类型
    addTypeHandler(formName) {
      this.$refs[formName].validate(value => {
        if (value) {
          addBillingType({ billingTypeName: this.ruleForm.name }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.ruleForm.name = ''
              this.visible = false
              this.getBillingTypes()
            }
          })
        }
      })
    },
    // 取消添加modal
    cancleAddTypeHandler() {
      this.ruleForm.name = ''
      this.visible = false
    },
    // 取消编辑modal
    cancleAddTypeHandler2() {
      this.ruleForm.name = ''
      this.visible2 = false
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getBillingTypes()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getBillingTypes()
    }
  }
}
</script>

<style></style>
